<template>
	<view class="device-detail-servcie-layout">
		<view class="device-detail-servcie-item" @tap="showSelectTemplate">
			<text>模板名称</text>
			<view class="device-detail-servcie-item-right">
				<text>{{selectTemplate ? selectTemplate.depositName : '' }}</text>
				<xh-icon icon="icon_shanglajiantou" v-if="isEdit"></xh-icon>
			</view>
		</view>
		<view class="device-detail-servcie-operate" v-if="isCanEdit">
			<!-- 正在操作 -->
			<view v-if="isEdit">
				<view class="submit-btn" style="margin: 0;" @tap="submit">确认修改</view>
				<view class="cancel-btn" style="margin: 30rpx 0 0 0;" @tap="cancel">取消</view>
			</view>
			<!-- 操作完成 -->
			<view class="device-detail-servcie-operate-edit" v-if="!isEdit" @tap="isEdit = true">修改模版</view>
		</view>
		<uv-picker ref="picker" :columns="pickerList" keyName="depositName" @confirm="confirm"></uv-picker>
	</view>
</template>

<script setup>
	import { ref,onMounted,computed } from 'vue'
	import { getDeviceDetailByService,getDeviceDetailTemplateList ,updateServiceTemplate} from '@/common/api/api.js'
	
	const props = defineProps(['model'])
	const pickerList = ref([])
	const picker = ref(null)
	// 选择的模板
	const selectTemplate = ref({
		depositId:'',
		depositName:''
	})
	// 当前是否为编辑状态
	const isEdit = ref(false)
	const dataInfo = ref({
		depositId:'',
		depositName:''
	})
	// 是否支持修改
	const isCanEdit = ref(false)
	// 选择模版
	const showSelectTemplate = () => {
		if(isEdit.value){
			picker.value.open()
		}
	}
	// 选择模板回调
	const confirm = (res)=>{
		console.log(res)
		selectTemplate.value = res.value[0]
	}
	//取消
	const cancel = ()=>{
		isEdit.value = false
		selectTemplate.value.depositId = dataInfo.value.depositId
		selectTemplate.value.depositName = dataInfo.value.depositName
	}
	// 确认修改
	const submit = async ()=>{
		if(uni.$uv.test.empty(selectTemplate.value.depositId)){
			uni.$utils.showToast('请选择服务费模板')
			return
		}
		let params = {}
		if(props.model.id){
			params.id = props.model.id
		}
		else{
			params.id = props.model.deviceId
		}
		params.depositId = selectTemplate.value.depositId
		await updateServiceTemplate(params)
		isEdit.value = false
		uni.$utils.showToast('修改模板成功')
	}
	// 获取模版列表
	const getTemplateList = async ()=>{
		let params = {}
		if(props.model.id){
			params.id = props.model.id
		}
		else{
			params.id = props.model.deviceId
		}
		const res = await getDeviceDetailTemplateList(params)
		pickerList.value = [res.result]
	}
	// 获取服务费信息
	const getServcieInfo = async ()=>{
		let params = {}
		if(props.model.id){
			params.id = props.model.id
		}
		else{
			params.id = props.model.deviceId
		}
		const res = await getDeviceDetailByService(params)
		dataInfo.value = {...dataInfo.value,...res.result}
		if(dataInfo.value.serviceOpenStatus == '1' && props.model.bindStatus != '1'){
			isCanEdit.value = true
		}
		else{
			isCanEdit.value = false
		}
		selectTemplate.value.depositId = dataInfo.value.depositId
		selectTemplate.value.depositName = dataInfo.value.depositName
	}
	onMounted(()=>{
		getTemplateList()
		getServcieInfo()
		
	})
</script>

<style lang="scss" scoped>
	.device-detail-servcie-layout {
		.device-detail-servcie-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.device-detail-servcie-item-right {
				display: flex;
				align-items: center;
				color: $xh-color-9;
				font-size: 26rpx;
			}
		}

		.device-detail-servcie-operate {
			padding-top: 50rpx;

			.device-detail-servcie-operate-edit {
				color: $xh-theme-color;
				text-align: center;
			}
		}
	}
</style>